<template>
    <div class="method-select w-[270px] min-h-[400px]" v-loading="listLoader.isLoading">
        <div class="cell">
            <span class="title">对接方式</span>
            <el-dropdown v-if="!listLoader.data?.length" trigger="click" placement="bottom" @command="add">
                <span class="p-2 el-icon-circle-plus text-xl"></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="i in interfaces" :command="i" :key="i.code">{{i.name}}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="cell" v-for="config in listLoader.data" @click="select(config)">
            <span class="title">{{config.name}}</span>
            <button class="p-2 el-icon-delete text-xl text-[#EE7171]" @click.stop="del(config)"></button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { Message, MessageBox } from 'element-ui';
import { Loader } from 'src/framework/network/Loader';
import { onMounted, reactive } from 'vue';
import { Village } from '../../types';
import * as api from './api';
const props = defineProps<{
    village: Village
    interfaces: api.Interface[]
    value?: api.Interface
}>()

const emit = defineEmits<{
    (event: 'input', value: api.Interface | undefined): void
}>()
const dockType = props.interfaces[0].code.split('-')[0]
const listLoader = reactive(new Loader(api.villageEquipConfig))
listLoader.baseParams = { villageId: props.village.id, dockType: dockType }

async function refreshList() {
    const configs = await listLoader.load()
    if (configs.length) {
        select(configs[0])
    } else {
        select(undefined)
    }
}

onMounted(refreshList)

function select(params?: api.Interface & { name: string, villageId: number }) {
    emit('input', params)
}

async function add(params: api.Interface) {
    try {
        if (listLoader.data?.length) {
            throw new Error('对接方式只能选择一个')
        }
        await api.addVillageEquipConfig({ villageId: props.village.id, typeCode: params.code })
    } catch (error) {
        Message.error(error.message)
    } finally {
        refreshList()
    }
}

async function del(params: api.Interface & { name: string, villageId: number }) {
    let msg = '删除厂家后，设备列表将清空，是否执行此操作？'
    if ([
        api.Interfaces.门禁_大华云.code,
        api.Interfaces.门禁_海康云.code].includes(params.code)) {
        msg = '删除厂家后，设备列表将清空，人员和门禁配置都将与设备解绑，是否执行此操作？'
    }
    if ([
        api.Interfaces.视频_大华云.code,
        api.Interfaces.视频_海康云.code,
        api.Interfaces.视频_局域网.code].includes(params.code)) {
        msg = '删除厂家后，设备列表将清空，安防视频配置将解绑，是否执行此操作？'
    }
    MessageBox.confirm(msg, '操作确认', { type: 'warning' }).then(async () => {
        try {
            await api.delVillageEquipConfig({ villageId: params.villageId, typeCode: params.code })
        } catch (error) {
            Message.error(error.message)
        } finally {
            refreshList()
        }
    })

}

</script>

<style scoped>
.method-select {
    border-right: 1px solid #E4E7ED;
    border-radius: 4px 4px 0px 0px;
}

.cell {
    padding: 0 10px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background-color: #FEF9F0;
}

.cell:first-child {
    background-color: #F4F4F4;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.cell:nth-child(2):before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #E4E7ED;
}

.cell:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.cell .title {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: #606266;
}

.cell:first-child .title {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: #606266;
}
</style>